<template>
  <div>
    <div ref="box" style="width:580px; height:370px" />
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  created() {
    setTimeout(() => {
      this.lineFive()
    }, 1000)
  },
  methods: {
    lineFive() {
      const myChart = echarts.init(this.$refs.box)
      var myColor = ['#e15536']
      var option = {
        backgroundColor: '#fff',
        grid: {
          left: '11%',
          top: '12%',
          right: '0%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: [{
          show: false
        }],
        yAxis: [{
          axisTick: 'none',
          axisLine: 'none',
          offset: '27',
          axisLabel: {
            textStyle: {
              color: '#f75d3b',
              fontSize: '16'
            }
          },
          data: ['南昌转运中心', '广州转运中心', '杭州转运中心', '宁夏转运中心', '兰州转运中心', '南宁转运中心', '长沙转运中心', '武汉转运中心', '合肥转运中心', '贵州转运中心']
        }, {
          axisTick: 'none',
          axisLine: 'none',
          axisLabel: {
            textStyle: {
              color: '#ffffff',
              fontSize: '16'
            }
          },
          data: ['10', '9', '8', '7', '6', '5', '4', '3', '2', '1']
        }, {
          name: '分拨延误TOP 10',
          nameGap: '50',
          nameTextStyle: {
            color: '#ffffff',
            fontSize: '16'
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(0,0,0,0)'
            }
          },
          data: []
        }],
        series: [
          {
            name: '条',
            type: 'bar',
            yAxisIndex: 0,
            data: [4, 13, 25, 29, 38, 44, 50, 52, 60, 72],
            barWidth: 12,
            itemStyle: {
              normal: {
                color: function(params) {
                  var num = myColor.length
                  return myColor[params.dataIndex % num]
                }
              }
            },
            z: 2
          }, {
            name: '白框',
            type: 'bar',
            yAxisIndex: 1,
            barGap: '-100%',
            data: [99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
            barWidth: 10,
            itemStyle: {
              normal: {
                color: '#fff',
                barBorderRadius: 5
              }
            },
            z: 1
          }, {
            name: '外框',
            type: 'bar',
            yAxisIndex: 2,
            barGap: '-100%',
            data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
              normal: {
                color: function(params) {
                  var num = myColor.length
                  return myColor[params.dataIndex % num]
                },
                barBorderRadius: 5
              }
            },
            z: 0
          },
          {
            name: '外圆',
            type: 'scatter',
            hoverAnimation: false,
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            yAxisIndex: 2,
            symbolSize: 25,
            itemStyle: {
              normal: {
                color: function(params) {
                  var num = myColor.length
                  return myColor[params.dataIndex % num]
                },
                opacity: 1
              }
            },
            z: 2
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style>

</style>
